<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11-事件的委派</title>
    <script>
        window.onload = function () {

            var ul = document.getElementById("ul");
            var btn01 = document.getElementById("btn01");
            
            btn01.onclick = function () {
                var li = document.createElement("li");
                li.innerHTML = "<a href='###' class='link'>新超链接</a>"
                ul.appendChild(li);
            }

            ul.onclick = function (event) {

                if (event.target.className == "link") {
                    alert("点击了超链接");
                }

                // alert("点击了超链接");
                
            }
        }
    </script>
</head>

<body>
    <button id="btn01">添加超链接</button>
    <ul id="ul">
        <li>
            <p>我是元素p</p>
        </li>
        <li><a href="###" class="link">超链接一</a></li>
        <li><a href="###" class="link">超链接二</a></li>
        <li><a href="###" class="link">超链接三</a></li>

    </ul>
</body>

</html>